<template>
   <!-- 弹窗组件 -->
   <div class="dialog-box">
      <el-dialog
         v-model="dialogVisible"
         title="关联采购单"
         width="660"
      >
         <div class="dialog-content">
            <!-- 左侧产品列表 -->
            <div class="row-2">
               <div class="row-2-search">
                  <el-input
                     placeholder="采购单号/供应商"
                     suffix-icon="Search"
                     v-model="searchValue"
                     @input="handleSearch"
                  />
               </div>
               <div class="table-container">
                  <el-table
                     ref="leftTableRef"
                     :data="tableData"
                     style="width: 100%"
                     border
                     :row-key="(row:User) => row.id"
                  >
                     <el-table-column width="55">
                        <template #default="scope">
                           <el-radio
                              v-model="selectedRowId"
                              :label="scope.row.id"
                              @change="handleRadioChange(scope.row)"
                           />
                        </template>
                     </el-table-column>
                     <el-table-column
                        label="采购单号"
                        property="order_no"
                        width="auto"
                     >
                     </el-table-column>
                     <el-table-column
                        property="total_amount"
                        label="采购金额(元)"
                        width="150"
                     />
                     <el-table-column
                        property="created_at"
                        label="采购日期"
                        show-overflow-tooltip
                        width="145"
                     />
                  </el-table>
               </div>
            </div>
         </div>

         <template #footer>
            <div class="dialog-footer">
               <el-button @click="dialogVisible = false">取消</el-button>
               <el-button
                  color="#626aef"
                  @click="submit"
                  >确认</el-button
               >
            </div>
         </template>
      </el-dialog>
   </div>
</template>

<script setup lang="ts">
   import { ref, defineEmits } from "vue";
   import { Search } from "@element-plus/icons-vue";
   import api from "@/api/index.js";
   import type { ElTable } from "element-plus";
   import { includes } from "lodash";
   const searchValue = ref<string>("");
   // 添加一个用于存储原始数据的变量
   const originalTableData = ref<User[]>([]);
   interface User {
      order_no: string;
      total_amount: string;
      created_at: string;
      id: number;
      type_text: string;
      supplier_name?: string; // 添加供应商名称字段，使用可选属性
   }
   const tableData = ref<User[]>([]);
   // 获取采购订单列表
   const getPurchaseOrderList = async () => {
      const res = await api.procurement.purchaseOrderList({
         page: 1,
         pageSize: 10,
      });
      if (res.code === 200) {
         let _L = res.data.data.filter((item: any) => item.status == 2 && item.pur_state == 1);
         console.log(_L);
         originalTableData.value = _L;
         tableData.value = _L;
      }
   };

   // 监听搜索输入变化
   const handleSearch = () => {
      if (!searchValue.value) {
         tableData.value = originalTableData.value;
         return;
      }
      const keyword = searchValue.value.toLowerCase();
      tableData.value = originalTableData.value.filter((item) => {
         const matchOrderNo = item.order_no.toLowerCase().includes(keyword);
         const matchSupplier = item.supplier_name ? item.supplier_name.toLowerCase().includes(keyword) : false;
         return matchOrderNo || matchSupplier;
      });
   };

   // 添加监听器
   const watchSearch = () => {
      searchValue.value = '';
      tableData.value = originalTableData.value;
   };

   const selectedRowId = ref<Number>(); // 选中的行id
   const selectedRow = ref<User>(); // 选中的行

   const handleRadioChange = (row: User) => {
      selectedRow.value = row;
   };
   // 打开弹窗
   const dialogVisible = ref<boolean>(false);
   const openLoading = () => {
      dialogVisible.value = true;
      searchValue.value = '';
      getPurchaseOrderList();
   };
   const submit = () => {
      if (selectedRow.value) {
         emit("handleSelectAssociatedPurchaseOrder", selectedRow.value);
      }
      dialogVisible.value = false;
   };

   const emit = defineEmits(["handleSelectAssociatedPurchaseOrder"]);

   defineExpose({ openLoading });
</script>

<style lang="scss" scoped>
   .dialog-content {
      display: flex;
      height: 400px;
      flex-direction: row;
      gap: 10px;
      .row-2 {
         flex: 2;
         width: 100%;
         display: flex;
         flex-direction: column;
         overflow: hidden;

         .row-2-search {
            margin-bottom: 10px;
            width: 30%;
         }

         .table-container {
            flex: 1;
            overflow-y: auto;
            overflow-x: hidden;

            &::-webkit-scrollbar {
               width: 6px;
               height: 6px;
            }

            &::-webkit-scrollbar-thumb {
               border-radius: 3px;
               background: #ddd;
            }

            &::-webkit-scrollbar-track {
               border-radius: 3px;
               background: #f5f5f5;
            }

            .el-table {
               height: 100%;
            }
         }
      }
   }
   ::v-deep .el-dialog {
      --el-dialog-padding-primary: 0px;
   }
   ::v-deep .el-dialog__header {
      padding: 10px 16px;
      border-bottom: 1px solid #f0f0f0;
      font-weight: bold;
   }
   ::v-deep .dialog-footer {
      padding: 10px 16px;
      border-top: 1px solid #f0f0f0;
   }
   ::v-deep .el-dialog__headerbtn .el-dialog__close {
      color: #000;
   }
   ::v-deep .el-dialog__body {
      padding: 20px 10px;
   }
   :deep(.cell) {
      white-space: nowrap;
      text-overflow: ellipsis;
   }
   :deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
      background-color: #6860ff;
      border-color: #6860ff;
   }
   :deep(.el-checkbox__inner:hover) {
      border-color: #626aef !important;
   }
   :deep(.el-checkbox__input.is-indeterminate .el-checkbox__inner) {
      background-color: #6860ff;
   }
   :deep(.el-checkbox__input.is-indeterminate .el-checkbox__inner) {
      border-color: #6860ff;
   }
   :deep(.el-radio__label) {
      display: none;
   }
   :deep(.el-radio__input.is-checked .el-radio__inner) {
      background: #6860ff;
      color: #6860ff;
   }
   :deep(.el-radio) {
      border-color: none;
   }
</style>
